import styled from "styled-components";

export const ShopcarStyle = styled.div` 
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color:white;
    display:flex;
    flex-direction:column;
    z-index:5;
    .navbar{
        width:100%;
        height:3rem;
        display:flex;
        flex-flow: row;
        align-items:center;
        justify-content:space-between;
        .navbar_left{
            padding-left:5%;
            svg{
                width:1.3rem;
                height:1.3rem;
            }
        }
        .navbar_mid{
            padding-bottom:1%;
        }
        .navbar_right{
            padding-right:5%;
            svg{
                width:1.3rem;
                height:1.3rem;
            }
        }
    }
    
    .container{
        width:100%;
        flex:1;
        margin: 0 auto;
        display:flex;
        flex-direction: column;
        .shopcar_head{
            display:flex;
            flex-flow:row;
            height:10%;
            width:95%;
            margin:0 auto;
            align-items:center;
            margin-bottom:3%;
            .shopcar{
                font-size:1.6rem;
                font-weight:750;
            }
            .manage{
                font-size:.9rem;
                margin-left:auto;
            }
        }
        overflow:hidden;
        .inner-container {
            flex:1;
            display:flex;
            flex-direction: column;
      
       
            .body_container{
                width:100%;
                /* height:100%; */
                flex:1;
                
                .min_height{
                    height:80vh;
                    .itemcard{
                    display:flex;
                    height:15vh;
                    margin-bottom:3vh;
                    /* height:20%; */
                    width:95%;
                    margin:0 auto;
                    align-items:center;
                    margin-bottom:5%;
                }
                img{
                    height:100%;
                }
                .cardInfo{
                    margin-left:5%;
                    width:60%;
                    height:100%;
                    display:flex;
                    flex-flow: column;
                    justify-content:space-around;
                    margin-right:auto;
                    .infoHead{

                    }
                    .infoBody{

                    }
                    .infoBottom{
                        width:100%;
                        display:flex;
                        flex-flow:row;
                        align-items:end;
                        .price{

                        }
                        .changenumber{
                                position:relative;
                                margin-left:auto;
                                margin-top:0.5rem;
                                width:30%;
                                height:1rem;
                                background-color:#f5f7fa;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                input{  
                                    margin-left:2.5rem;
                                    width:3rem;
                                    background:none;  
                                    outline:none;  
                                    border:none;
                                }
                                .decrement svg{
                                    position:absolute;
                                    top:-.1rem;
                                    left:0rem;
                                    width:1rem;
                                    height:1rem;
                                }
                                .increment svg{
                                    position:absolute;
                                    top:-.1rem;
                                    right:0rem;
                                    width:1rem;
                                    height:1rem;
                                }
                            
                        }
                    }
                }
            
                }
            }
        }
        .shopcar_footer{
                height:20%;
                width:100%;
                display:flex;
                flex-flow:column;
                /* align-items:center; */
                .checkall{
                    display:flex;
                    flex-flow:row;
                    align-items:center;
                    height:40%;
                    width:100%;
                    margin:0 auto;
                    background-color:#f5f7fa;
                }
                .buy{
                    height:60%;
                    width:95%;
                    margin:0 auto;
                    display:flex;
                    align-items:center;
                    .showprice{
                        display:flex;
                        flex-flow:column;
                        .price{
                            display:flex;
                            flex-flow:row;
                            align-items:center;
                            .price_left{
                                font-weight:400;
                                font-size:1rem;
                                margin-right:1rem;
                            }
                            .price_right{
                                font-weight:400;
                                color:#bdcbdf;
                                font-size:.8rem;
                            }
                        }
                    }
                    .buynow{
                        display:flex;
                        width:45%;
                        height:60%;
                        border:1px solid black;
                        margin-left:auto;
                        justify-content:center;
                        align-items:center;
                        background-color:black;
                        color:white;
                        .title{
                            font-weight:400;
                            font-size:1rem;
                        }
                    }
                }
            }
    }
`